<template>
    <div class="item">
        <h2>游戏</h2>
        <slot :youxi="games"></slot>
    </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue'
let games = reactive([
    { id: 'asgytdfats01', name: '英雄联盟' },
    { id: 'asgytdfats02', name: '王者农药' },
    { id: 'asgytdfats03', name: '红色警戒' },
    { id: 'asgytdfats04', name: '斗罗大陆' }
])
</script>
<style scoped>
.item {
    padding: 10px;
    width: 200px;
    height: 250px;
    background: rgb(62, 130, 202);
}

h2 {

    margin: 0;
    text-align: center;
    background: rgb(237, 103, 41);
}
</style>